const { src, dest, parallel, series } = require("gulp")
const cleanCss = require("gulp-clean-css")
const rename = require("gulp-rename")
const babel = require("gulp-babel")
const uglify = require("gulp-uglify")
const htmlmin = require("gulp-htmlmin")
const imagemin = require("gulp-imagemin")
const browserSync = require("browser-sync")
const bs = browserSync.create()

const style = ()=>{
  //以流的方式输入输出
  return src("src/css/index.css")
  .pipe(cleanCss())
  .pipe(rename({"extname": ".min.css"}))
  .pipe(dest("dist"))
}

const script = ()=>{
  return src("src/js/index.js")
  .pipe(babel({
    presets: ["babel-preset-env"]
  }))
  .pipe(uglify())
  .pipe(rename({"extname": ".min.js"}))
  .pipe(dest("dist"))
}

const scripts = ()=>{
  return src(["src/js/jquery-3.4.1.min.js", "src/js/template-web.js"])
  .pipe(dest("dist"))
}

const html = ()=>{
  return src("src/index.html")
  .pipe(htmlmin({ 
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true
  }))
  .pipe(dest("dist"))
}

const json = ()=>{
  return src("src/json/dbs.json")
  .pipe(dest("dist/json"))
}

const image = ()=>{
  return src("src/imgs/**")
  .pipe(imagemin())
  .pipe(dest("dist/imgs"))
}

//声明服务发布

const server = ()=>{
  bs.init({
    server:{
      baseDir: './dist' //指定服务启动目录
    }
  })
}

//组合任务
const bulid = parallel(style, script, scripts, html, json, image)

const dev = series(bulid, server)


module.exports = {
  dev
}